<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-11-03 17:46:23
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-11-05 10:46:11
-->
<template>
  <div class="section-view">
    <div class="section-view__header">
      <div class="header-left">
        <el-input
          v-model="form.name"
          autocomplete="off"
          size="small"
          placeholder="输入姓名"
        />
        <el-select v-model="form.nationality" size="small" placeholder="请选择国籍" filterable>
          <el-option-group v-for="group in country" :key="group.label" :label="group.label">
            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.label">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-option-group>
        </el-select>
        <el-date-picker
          v-model="form.timers"
          type="daterange"
          size="small"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="header-right">
        <el-button size="small" class="el-submit-btn" type="primary" @click="initTable">查询</el-button>
        <el-button
          size="small"
          class="el-reset-btn"
          type="primary"
          @click="
            form = {
              page: 1,
              limit: 10
            }
          "
        >
          清空条件
        </el-button>
      </div>
    </div>
    <div class="section-view__body">
      <div class="section-view__operation">
        <el-button type="primary" size="small" @click="exportTable">导出表格</el-button>
        <!-- <el-button type="danger" size="small" @click="deleteRow">删除</el-button> -->
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="changeFun"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="昵称"
          width="180"
        />
        <el-table-column
          prop="head"
          label="头像"
          width="180"
        >
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.head"
              style="max-width: 100px; max-height: 100px"
              :src="scope.row.head"
              :fit="'contain'"
            >
              <div slot="error" class="image-slot">图片加载失败</div>
            </el-image>
            <p v-else>未上传头像</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
        >
          <template slot-scope="scope">
            {{ scope.row.gender == 2 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="nationality"
          label="国籍"
        />
        <el-table-column
          prop="birthday"
          label="生日"
        />
        <el-table-column
          prop="job"
          label="行业"
        />
        <el-table-column
          prop="location"
          label="居住地"
        />
        <el-table-column
          prop="language"
          label="语言"
        />
        <el-table-column label="操作" width="110">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="openDialog(scope.row)">
              发送私信
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="secton-view__page">
        <el-pagination
          v-if="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="initTable"
        />
      </div>
    </div>
    <el-dialog
      title="发送私信"
      width="460px"
      :close-on-click-modal="false"
      :visible.sync="infoDialogVisible"
    >
      <div class="dialog-body">
        <el-form ref="messageForm" :model="editForm" class="edit-form">
          <div class="edit-form__right">
            <el-form-item
              label="标题"
              :label-width="'140px'"
              prop="title"
              :rules="[
                {
                  required: true,
                  pattern: $utils.characters,
                  message: '请输入正确的标题',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="editForm.title" autocomplete="off" maxlength="100" />
            </el-form-item>
            <el-form-item
              label="内容"
              :label-width="'140px'"
              prop="content"
              :rules="[
                {
                  required: true,
                  pattern: $utils.characters,
                  message: '请输入正确的内容',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="editForm.content" autocomplete="off" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  props: {},
  data() {
    return {
      row: {},
      tableData: [],
      editForm: {},
      multipleSelection: [],
      head: '',
      infoDialogVisible: false,
      defaultProps: { children: 'children', label: 'title' },
      total: 0,
      form: {
        title: '',
        page: 1,
        limit: 10
      },
      country: [
        {
          label: '所有国家',
          options: [
            { value: 'Angola', label: '安哥拉' },
            { value: 'Afghanistan', label: '阿富汗' },
            { value: 'Albania', label: '阿尔巴尼亚' },
            { value: 'Algeria', label: '阿尔及利亚' },
            { value: 'Andorra', label: '安道尔共和国' },
            { value: 'Anguilla', label: '安圭拉岛' },
            { value: 'Antigua and Barbuda', label: '安提瓜和巴布达' },
            { value: 'Argentina', label: '阿根廷' },
            { value: 'Armenia', label: '亚美尼亚' },
            { value: 'Ascension', label: '阿森松' },
            { value: 'Australia', label: '澳大利亚' },
            { value: 'Austria', label: '奥地利' },
            { value: 'Azerbaijan', label: '阿塞拜疆' },
            { value: 'Bahamas', label: '巴哈马' },
            { value: 'Bahrain', label: '巴林' },
            { value: 'Bangladesh', label: '孟加拉国' },
            { value: 'Barbados', label: '巴巴多斯' },
            { value: 'Belarus', label: '白俄罗斯' },
            { value: 'Belgium', label: '比利时' },
            { value: 'Belize', label: '伯利兹' },
            { value: 'Benin', label: '贝宁' },
            { value: 'Bermuda Is', label: '百慕大群岛' },
            { value: 'Bolivia', label: '玻利维亚' },
            { value: 'Botswana', label: '博茨瓦纳' },
            { value: 'Brazil', label: '巴西' },
            { value: 'Brunei', label: '文莱' },
            { value: 'Bulgaria', label: '保加利亚' },
            { value: 'Burkina Faso', label: '布基纳法索' },
            { value: 'Burma', label: '缅甸' },
            { value: 'Burundi', label: '布隆迪' },
            { value: 'Cameroon', label: '喀麦隆' },
            { value: 'Canada', label: '加拿大' },
            { value: 'Cayman Is', label: '开曼群岛' },
            { value: 'Central African Republic', label: '中非共和国' },
            { value: 'Chad', label: '乍得' },
            { value: 'Chile', label: '智利' },
            { value: 'China', label: '中国' },
            { value: 'Colombia', label: '哥伦比亚' },
            { value: 'Congo', label: '刚果' },
            { value: 'Cook Is', label: '库克群岛' },
            { value: 'Costa Rica', label: '哥斯达黎加' },
            { value: 'Cuba', label: '古巴' },
            { value: 'Cyprus', label: '塞浦路斯' },
            { value: 'Czech Republic', label: '捷克' },
            { value: 'Denmark', label: '丹麦' },
            { value: 'Djibouti', label: '吉布提' },
            { value: 'Dominica Rep', label: '多米尼加共和国' },
            { value: 'Ecuador', label: '厄瓜多尔' },
            { value: 'Egypt', label: '埃及' },
            { value: 'EI Salvador', label: '萨尔瓦多' },
            { value: 'Estonia', label: '爱沙尼亚' },
            { value: 'Ethiopia', label: '埃塞俄比亚' },
            { value: 'Fiji', label: '斐济' },
            { value: 'Finland', label: '芬兰' },
            { value: 'France', label: '法国' },
            { value: 'French Guiana', label: '法属圭亚那' },
            { value: 'French Polynesia', label: '法属玻利尼西亚' },
            { value: 'Gabon', label: '加蓬' },
            { value: 'Gambia', label: '冈比亚' },
            { value: 'Georgia', label: '格鲁吉亚' },
            { value: 'Germany', label: '德国' },
            { value: 'Ghana', label: '加纳' },
            { value: 'Gibraltar', label: '直布罗陀' },
            { value: 'Greece', label: '希腊' },
            { value: 'Grenada', label: '格林纳达' },
            { value: 'Guam', label: '关岛' },
            { value: 'Guatemala', label: '危地马拉' },
            { value: 'Guinea', label: '几内亚' },
            { value: 'Guyana', label: '圭亚那' },
            { value: 'Haiti', label: '海地' },
            { value: 'Honduras', label: '洪都拉斯' },
            { value: 'Hungary', label: '匈牙利' },
            { value: 'Iceland', label: '冰岛' },
            { value: 'India', label: '印度' },
            { value: 'Indonesia', label: '印度尼西亚' },
            { value: 'Iran', label: '伊朗' },
            { value: 'Iraq', label: '伊拉克' },
            { value: 'Ireland', label: '爱尔兰' },
            { value: 'Israel', label: '以色列' },
            { value: 'Italy', label: '意大利' },
            { value: 'Ivory Coast', label: '科特迪瓦' },
            { value: 'Jamaica', label: '牙买加' },
            { value: 'Japan', label: '日本' },
            { value: 'Jordan', label: '约旦' },
            { value: 'Kampuchea (Cambodia )', label: '柬埔寨' },
            { value: 'Kazakstan', label: '哈萨克斯坦' },
            { value: 'Kenya', label: '肯尼亚' },
            { value: 'Korea', label: '韩国' },
            { value: 'Kuwait', label: '科威特' },
            { value: 'Kyrgyzstan', label: '吉尔吉斯坦' },
            { value: 'Laos', label: '老挝' },
            { value: 'Latvia', label: '拉脱维亚' },
            { value: 'Lebanon', label: '黎巴嫩' },
            { value: 'Lesotho', label: '莱索托' },
            { value: 'Liberia', label: '利比里亚' },
            { value: 'Libya', label: '利比亚' },
            { value: 'Liechtenstein', label: '列支敦士登' },
            { value: 'Lithuania', label: '立陶宛' },
            { value: 'Luxembourg', label: '卢森堡' },
            { value: 'Madagascar', label: '马达加斯加' },
            { value: 'Malawi', label: '马拉维' },
            { value: 'Malaysia', label: '马来西亚' },
            { value: 'Maldives', label: '马尔代夫' },
            { value: 'Mali', label: '马里' },
            { value: 'Malta', label: '马耳他' },
            { value: 'Mariana Is', label: '马里亚那群岛' },
            { value: 'Martinique', label: '马提尼克' },
            { value: 'Mauritius', label: '毛里求斯' },
            { value: 'Mexico', label: '墨西哥' },
            { value: 'Moldova', label: '摩尔多瓦' },
            { value: 'Monaco', label: '摩纳哥' },
            { value: 'Mongolia', label: '蒙古' },
            { value: 'Montserrat Is', label: '蒙特塞拉特岛' },
            { value: 'Morocco', label: '摩洛哥' },
            { value: 'Mozambique', label: '莫桑比克' },
            { value: 'Namibia', label: '纳米比亚' },
            { value: 'Nauru', label: '瑙鲁' },
            { value: 'Nepal', label: '尼泊尔' },
            { value: 'Netheriands Antilles', label: '荷属安的列斯' },
            { value: 'Netherlands', label: '荷兰' },
            { value: 'New Zealand', label: '新西兰' },
            { value: 'Nicaragua', label: '尼加拉瓜' },
            { value: 'Niger', label: '尼日尔' },
            { value: 'Nigeria', label: '尼日利亚' },
            { value: 'North Korea', label: '朝鲜' },
            { value: 'Norway', label: '挪威' },
            { value: 'Oman', label: '阿曼' },
            { value: 'Pakistan', label: '巴基斯坦' },
            { value: 'Panama', label: '巴拿马' },
            { value: 'Papua New Cuinea', label: '巴布亚新几内亚' },
            { value: 'Paraguay', label: '巴拉圭' },
            { value: 'Peru', label: '秘鲁' },
            { value: 'Philippines', label: '菲律宾' },
            { value: 'Poland', label: '波兰' },
            { value: 'Portugal', label: '葡萄牙' },
            { value: 'Puerto Rico', label: '波多黎各' },
            { value: 'Qatar', label: '卡塔尔' },
            { value: 'Reunion', label: '留尼旺' },
            { value: 'Romania', label: '罗马尼亚' },
            { value: 'Russia', label: '俄罗斯' },
            { value: 'Saint Lueia', label: '圣卢西亚' },
            { value: 'Saint Vincent', label: '圣文森特岛' },
            { value: 'Samoa Eastern', label: '东萨摩亚(美)' },
            { value: 'Samoa Western', label: '西萨摩亚' },
            { value: 'San Marino', label: '圣马力诺' },
            { value: 'Sao Tome and Principe', label: '圣多美和普林西比' },
            { value: 'Saudi Arabia', label: '沙特阿拉伯' },
            { value: 'Senegal', label: '塞内加尔' },
            { value: 'Seychelles', label: '塞舌尔' },
            { value: 'Sierra Leone', label: '塞拉利昂' },
            { value: 'Singapore', label: '新加坡' },
            { value: 'Slovakia', label: '斯洛伐克' },
            { value: 'Slovenia', label: '斯洛文尼亚' },
            { value: 'Solomon Is', label: '所罗门群岛' },
            { value: 'Somali', label: '索马里' },
            { value: 'South Africa', label: '南非' },
            { value: 'Spain', label: '西班牙' },
            { value: 'SriLanka', label: '斯里兰卡' },
            { value: 'St.Lucia', label: '圣卢西亚' },
            { value: 'St.Vincent', label: '圣文森特' },
            { value: 'Sudan', label: '苏丹' },
            { value: 'Suriname', label: '苏里南' },
            { value: 'Swaziland', label: '斯威士兰' },
            { value: 'Sweden', label: '瑞典' },
            { value: 'Switzerland', label: '瑞士' },
            { value: 'Syria', label: '叙利亚' },
            { value: 'Tajikstan', label: '塔吉克斯坦' },
            { value: 'Tanzania', label: '坦桑尼亚' },
            { value: 'Thailand', label: '泰国' },
            { value: 'Togo', label: '多哥' },
            { value: 'Tonga', label: '汤加' },
            { value: 'Trinidad and Tobago', label: '特立尼达和多巴哥' },
            { value: 'Tunisia', label: '突尼斯' },
            { value: 'Turkey', label: '土耳其' },
            { value: 'Turkmenistan', label: '土库曼斯坦' },
            { value: 'Uganda', label: '乌干达' },
            { value: 'Ukraine', label: '乌克兰' },
            { value: 'United Arab Emirates', label: '阿拉伯联合酋长国' },
            { value: 'United Kiongdom', label: '英国' },
            { value: 'United States of America', label: '美国' },
            { value: 'Uruguay', label: '乌拉圭' },
            { value: 'Uzbekistan', label: '乌兹别克斯坦' },
            { value: 'Venezuela', label: '委内瑞拉' },
            { value: 'Vietnam', label: '越南' },
            { value: 'Yemen', label: '也门' },
            { value: 'Yugoslavia', label: '南斯拉夫' },
            { value: 'Zimbabwe', label: '津巴布韦' },
            { value: 'Zaire', label: '扎伊尔' },
            { value: 'Zambia', label: '赞比亚' }
          ]
        }]
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.initTable()
  },
  methods: {
    initTable(page) {
      if (typeof page !== 'number') {
        this.form.page = 1
      }
      const form = JSON.parse(JSON.stringify(this.form))
      if (form.timers) {
        form.startTime = form.timers[0]
        form.endTime = form.timers[1]
      } else {
        form.startTime = ''
        form.endTime = ''
      }
      delete form.timers
      this.$http.get('/account/queryForPage', {
        data: form
      }).then((res) => {
        if (res.success) {
          console.log(res)
          this.total = res.count
          this.tableData = res.data || []
        }
      })
    },
    changeFun(val) {
      console.log(val)
      this.multipleSelection = val
    },
    async openDialog(row, type) {
      this.row = row
      this.head = row.head
      this.infoDialogVisible = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    async submit() {
      this.$refs['messageForm'].validate(valid => {
        if (valid) {
          this.$http.post('/message/save', {
            title: this.editForm.title,
            content: this.editForm.content,
            accountId: this.row.id
          }).then((res) => {
            if (res.success) {
              this.$message.success(res.msg)
              this.infoDialogVisible = false
              this.initTable()
              this.row = {}
              this.editForm = {}
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setRoleList() {
      const ids = this.$refs.tree.getCheckedNodes().map(v => {
        return v.id
      })
      const menuIds = this.$refs.tree.getHalfCheckedNodes().map(v => {
        return v.id
      })
      this.$api.sysManageApi
        .roleMenuSaveOrUpdate({
          roleId: this.row.id,
          checkedMenuIds: [...menuIds, ...ids].join()
        })
        .then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.row = {}
        })
    },
    handleSuccess(res, file) {
      this.head = URL.createObjectURL(file.raw)
      this.editForm.head = res.data.filePath
    },
    exportTable() {
      console.log(this.multipleSelection)
      if (this.multipleSelection && this.multipleSelection.length) {
        const ids = this.multipleSelection.map((v) => {
          return v.id
        })
        window.location.href = `${process.env.VUE_APP_BASE_API}/account/exportExcel?ids=${ids}`
        console.log(`${process.env.VUE_APP_BASE_API}/account/exportExcel?ids=${ids}`)
      }
    },
    deleteRow(row) {
      if (row.id) {
        this.$confirm('确认删除吗？')
          .then(() => {
            this.$http.post('/banners/delete', {
              id: row.id
            }).then((res) => {
              if (res.success) {
                this.$message.success(res.msg)
                this.initTable()
              }
            })
            // this.$api.sysManageApi
            //   .deletRole({
            //     id: row.id
            //   })
            //   .then(v => {
            //     this.$message.success(v.msg)
            //     this.initTable()
            //   })
          })
          .catch(() => {})
      } else if (this.multipleSelection.length) {
        this.$confirm('确认删除吗？')
          .then(() => {
            this.$api.sysManageApi
              .deletRoles({
                ids: this.multipleSelection
                  .map(v => {
                    return v.id
                  })
                  .join()
              })
              .then(v => {
                this.$message.success(v.msg)
                this.initTable()
              })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-bottom: 50px;
}
.title {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin: 10px 0;
}
</style>
